<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>入库申请登记</title>

    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/bootstrap.css">

    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/bootstrap-table1.15.3.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>

<style>

    input{
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: black solid 1px;
    }

    table tr th,td{
        border: 1px solid black;
        text-align: center;
    }
    table{
        border: 1px;
        cell-padding:0;
        cell-spacing:0;
        width: 80%;
        margin-top: 20px;
    }
    table thead{
        background-color:#b3d7ff ;
    }

</style>

<script>

    function initPutRegister(){
        $('#putRegisterTableInfo').bootstrapTable(
            {
                //请求方式
                method:'post',
                contentType:'application/json',
                url:'/dFile/queryRegisterAll.action',
                //设置交替样式
                striped:true,
                //初始显示页号
                pageNumber:1,
                //是否显示分页
                pagination:true,
                //是否设置服务端分页还是客户端分页
                sidePagination:'server',
                //页面大小
                pageSize:6,
                /*//分页列表
                pageList:[1,3,5,6,10],*/
                //上传到到服务端的参数
                queryParams:function (pares) {
                    return{
                        //计算页号（当前页）
                        pageNum:(pares.offset/pares.limit)+1,
                        //计算页大小
                        pageSize:pares.limit,
                    }
                },
                //第一列名
                columns:[
                    {title:"产品编号",field:"PRODUCT_ID",align:"center"},
                    {title:"产品名称",field:"PRODUCT_NAME",align:"center"},
                    {title:"用途类型",field:"TYPE",align:"center",formatter:function (value,row,index) {
                            if(value == 'Y001-1'){
                                return '商品'
                            }else if(value == 'Y001-2'){
                                return '物料'
                            }
                        }},
                    {title:"单位",field:"PERSONAL_UNIT",align:"center"},
                    {title:"成本单价",field:"COST_PRICE",align:"center"},
                    {title:"入库",align:"center",formatter:function (value,row,index) {
                            return "<a href='#' onclick='addRegister("+JSON.stringify(row)+")'>入库</a>"
                        } }
                ]
            })
    }

    $(function () {

        //登记时间
        var today=new Date();
        let year = today.getFullYear();
        let month = today.getMonth();
        let date = today.getDate();
        let hours = today.getHours();
        let minutes = today.getMinutes();
        let seconds = today.getSeconds();
        today=year+"-"+(month+1)+"-"+date+" "+hours+":"+minutes+":"+seconds;

        $('#registerTime').val(today);

        $('#sumBtnId').click(function () {
            //判断表格中是否有数据 没有数据不能预览
            var trCount = $('#tbodyId tr').length;
            if(trCount<=0){
                alert('至少要有一条数据');
            }else {
                var arr = $('#tbodyId tr');
                // alert(arr.eq(0).children().eq(4));
                var sum=0;
                var sumMoney=0;
                for(var i=0;i<arr.length;i++){
                    //小计（元）
                    let  count  = parseInt($('.countClass').eq(i).val());
                    if(!isNaN(count)){
                        if(count==null || count == ''){
                            alert('数量不能为空');
                        }else if(count == 0){
                            alert('入库数量为0');
                        }else if(count<0){
                            alert('不小于0')
                        }else{
                            let  price =parseInt(arr.eq(i).children().eq(6).text());
                            arr.eq(i).children().eq(7).text(count*price);
                            //计算总件数
                            sum+=count;
                            //总金额
                            sumMoney+=count*price;
                            $('#submitDivId').show();
                            $('#btnDivId').hide();
                        }
                    }else{
                        alert('您输入了，不符合的字符，该空只能填写数字字符');
                        sum=0;
                        sumMoney=0;
                        return;
                    }

                    if(sum!=0){
                        //总件数
                        $('#amountSum').val(sum);
                    }
                    if(sumMoney!=0){
                        $('#costPriceSum').val(sumMoney);
                    }
                }
            }
        })

        $('#addRegister').click(function () {
            initPutRegister();
        })

        //删除 添加到 “入库申请单” 的表格中 按照 产品编号删除
        $('#delRegisterTableInfoByProId').click(function () {
            var length=$(".productCheck:checked").length;
            if(length<=0){
                alert("请至少勾选一个进行删除！")
            }else{
                for(var i=length-1;i>=0;i--){
                    var obj=$(".productCheck:checked").get(i).parentNode.parentNode;
                    obj.remove();
                }
            }
        });

        //返回
        $('.returnBtn').click(function () {
            window.location='putRegister.html'
        });

        //提交
        $('#submitBtnId').click(function () {
            //拿取表单中的值，放到SGather类中
            let formValue = $('#putRegisterFormId').serialize();
            //创建一个对象数组
            var arr=[];
            //拿取表格中的值，放到SGatherDetails类中
            for(var i=0;i<$('#tbodyId tr').length;i++){
                //获取每一行的对象tr
                let trObj = $('#tbodyId tr').get(i);
                // alert(trObj)
                //new 一个对象
                var sGatherDetailsObj = new Object();
                //获取值
                sGatherDetailsObj.productName = trObj.children[1].innerText;
                sGatherDetailsObj.productId = trObj.children[2].innerText;
                sGatherDetailsObj.productDescribe = trObj.children[3].innerText;
                sGatherDetailsObj.amount = $('.countClass').eq(i).val();
                sGatherDetailsObj.amountUnit = trObj.children[5].innerText;
                sGatherDetailsObj.costPrice = trObj.children[6].innerText;
                sGatherDetailsObj.subtotal = trObj.children[7].innerText;
                //存到对象数组中
                arr.push(sGatherDetailsObj)
            }

            $.ajax({
                type:'post',
                url:'/SGather/addSGather',
                data:formValue+'&sGatherDetailsJsonObj='+JSON.stringify(arr),
                success:function () {
                    alert('入库申请单，填写完成')
                    window.location='putRegister.html';
                },
                error:function () {
                    alert('入库申请单,填写失败');
                }
            });
        });

    })

    //将数据添加到 “入库申请单” 的表格中
    function addRegister(rows) {
        let tbodyId = $('#tbodyId');
        let trObj = $('<tr>');
        tbodyId.append(trObj);
        trObj.append($('<td>').html('<input class="productCheck" name="checkbox" type="checkbox">'));
        trObj.append($('<td>').text(rows.PRODUCT_NAME));
        trObj.append($('<td>').text(rows.PRODUCT_ID));
        //描述
        trObj.append($('<td>').text('好好好'));
        //数量
        trObj.append($('<td>').html('<input class="countClass" type="text" size="3px">'));
        trObj.append($('<td>').text(rows.PERSONAL_UNIT));
        trObj.append($('<td>').text(rows.COST_PRICE));
        //小计（元）
        trObj.append($('<td>').html('<span></span>'));
    }

</script>

<body bgcolor="#f5f5f5">
<div class="container-fluid">
    <div class="row" style="margin-top: 80px">
        <div class="col-12">
            <div style="width: 60%;margin: 0 auto;">
                <div class="col-6 offset-6" style="text-align: right" id="btnDivId">
                    <button class="btn btn-primary btn-sm" id="addRegister" data-toggle='modal' data-target='#putRegisterModal'>添加产品</button>
                    <button class="btn btn-warning btn-sm" id="delRegisterTableInfoByProId">删除产品</button>
                    <button class="btn btn-success btn-sm" id="sumBtnId">预览</button>
                    <button class="btn btn-primary btn-sm returnBtn">返回</button>
                </div>
                <div id="submitDivId" class="col-6 offset-6" style="text-align: right;display: none;">
                    <button class="btn btn-success btn-sm" id="submitBtnId">确认</button>
                    <button class="btn btn-primary btn-sm returnBtn">返回</button>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div style="width: 60%;height: 550px;border: 2px solid gray;margin: 0 auto;margin-top: 10px">
                <h3 align="center" style="margin-top: 30px">入库申请单</h3>
                <div class="container-fluid">
                    <form id="putRegisterFormId">
                        <div class="row" style="margin-top: 30px;">
                            <div class="col-2">
                                入库人：
                            </div>
                            <div class="col-3" style="padding-left: 0px;margin-left: 0px;">
                                <input name="storer" id="storer">
                            </div>
                            <div class="col-3" style="padding-left: 80px">
                                入库理由：
                            </div>
                            <div class="col-4" style="padding-left: 0px;margin-left: 0px;">
                                <select class="form-control" name="reason" id="reason">
                                    <option value="R001-1">生产入库</option>
                                    <option value="R001-2">库存初始</option>
                                    <option value="R001-3">赠送</option>
                                    <option value="R001-4">内部借领</option>
                                    <option value="R001-5">其他借领</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <table width="80%" style="margin-top: 20px;" class="table table-sm">
                                <thead  style="background-color: #b3d7ff;">
                                    <tr>
                                        <th>点选</th>
                                        <th>产品名称</th>
                                        <th>产品编号</th>
                                        <th>描述</th>
                                        <th>数量</th>
                                        <th>单位</th>
                                        <th>成本单价（元）</th>
                                        <th>小计（元）</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyId" align="center">

                                </tbody>
                            </table>
                        </div>

                        <div class="row" style="margin-top: 30px;">
                            <div class="col-2">
                                总件数：
                            </div>
                            <div class="col-4">
                                <input name="amountSum" id="amountSum">
                            </div>
                            <div class="col-2">
                                总金额：
                            </div>
                            <div class="col-4">
                                <input name="costPriceSum" id="costPriceSum">
                            </div>
                        </div>

                        <div class="row" style="margin-top: 30px;">
                            <div class="col-2">
                                登记人：
                            </div>
                            <div class="col-4">
                                <input name="register" id="register">
                            </div>
                            <div class="col-2">
                                登记时间：
                            </div>
                            <div class="col-4">
                                <input name="registerTime" id="registerTime">
                            </div>
                        </div>

                        <div style="margin-top: 30px;">
                            <span>备注：</span>
                            <textarea cols="70%" rows="3" name="remark" id="remark"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!--    模态框-->
    <div class="modal  fade" id="putRegisterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content" style="border: 1px solid black;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px"></button>
                </div>
                <div class="modal-body">
                        <table id="putRegisterTableInfo" width="60%" class="table table-sm thead-light">

                        </table>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>